<ion-header>
  <ion-toolbar>
    <ion-buttons left>
      <button ion-button icon-left (click)="navBack()">
        <ion-icon class="nav-back" name="arrow-back"></ion-icon>
      </button>
    </ion-buttons>
    <ion-title>{{person.personName}}</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <div class="alarm-default">
    <ion-card>
      <ion-icon class="scorebg" name="radio-button-on"></ion-icon>
      <div class="card-title">{{alarmTitle}}</div>
      <div class="card-subtitle">{{getAlarmTimes()}}<span style="font-size: 15px;">{{"times" | translate}}</span></div>
    </ion-card>
  </div>

  <ion-item *ngFor="let item of alarms; let o = odd; let e = even;">
    <div class="item-default">
      <ion-card>
        <ion-icon class="alarmbg" name="radio-button-on"></ion-icon>
        <div [class]="o ? 'alarm-title-odd' : 'alarm-title-even'">{{item.time | date: "HH:mm:ss"}}</div>
        <div *ngIf="alarm !== 'HEART' && alarm !== 'BREATHE'" class="alarm-subtitle">
          <img class="alarm-image" [src]="getAlarmImage()">
        </div>
        <div *ngIf="alarm === 'HEART' || alarm === 'BREATHE'" class="alarm-subtitle heart">{{item.value}}</div>
        <div class="alarm-suffix">
          <div class="alarm-link"></div>
        </div>
      </ion-card>
    </div>
  </ion-item>
</ion-content>
